<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="author" content="order by dede58.com"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="img/logo.png"/>
    <title>业财税一体化平台</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/mmss.css"/>
    <link rel="stylesheet" href="css/font-awesome.min.css"/>
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <style>

    </style>
</head>
<body>
<div id="app">
    <header>
        <div class="container-fluid navbar-fixed-top bg-primary">
            <ul class="nav navbar-nav  left">
                <li class="text-white h4">
                    &nbsp;&nbsp;&nbsp;&nbsp;<span class="glyphicon glyphicon-leaf"></span>&nbsp;&nbsp;<b>业财税一体化平台</b>
                </li>
            </ul>
            <ul class="nav navbar-nav nav-pills right ">
                <li class="bg-info dropdown">
                    <a class="dropdown-toggle" href="#" data-toggle="dropdown">
                        <span class="glyphicon glyphicon-user"></span>&nbsp;<span>{{token.userName}}</span><span class="caret"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <li class="text-center"><a v-on:click="logout()"><span class="text-primary">退出</span></a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </header>

    <section>
        <div class="container-fluid">
            <div class="row ">
                <!--左侧导航开始-->
                <div class="col-xs-2 bg-blue">
                    <br/>
                    <div class="panel-group sidebar-menu" id="accordion" aria-multiselectable="true">
                        <div class="panel panel-default menu-first menu-first-active">
                            <a data-toggle="collapse" data-parent="#accordion" href="index.html" aria-expanded="true"
                               aria-controls="collapseOne">
                                <i class="icon-home icon-large"></i> 主页
                            </a>
                        </div>
                        <div class="panel panel-default menu-first">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true"
                               aria-controls="collapseOne">
                                <i class="icon-user-md icon-large"></i> 系统管理</a>
                            </a>

                            <div id="collapseOne" class="panel-collapse collapse " >
                                <ul class="nav nav-list menu-second">
                                    <li v-if="token.role == 'admin'"><a href="user_manage.html"><i class="icon-user"></i> 用户管理</a></li>
                                    <li v-if="token.role == 'admin'"><a href="admin_manage.html"><i class="icon-user"></i> 管理员管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="business_line_manage.html"><i class="icon-list"></i> 业务线管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="tax_rate_manage.html"><i class="icon-list"></i> 区域税率管理</a></li>
                                    <li v-if="token.role == 'user'"><a href="company_account_manage.html"><i class="icon-list"></i> 公司账户管理</a></li>
                                </ul>
                            </div>
                        </div>
                        <div class="panel panel-default menu-first" v-if="token.role == 'user'">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"
                               aria-expanded="false" aria-controls="collapseTwo">
                                <i class="icon-book icon-large"></i> 账务管理</a>
                            </a>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <ul class="nav nav-list menu-second">
                                    <li><a href="contract_manage.html"><i class="icon-list"></i> 合同管理</a></li>
                                    <li><a href="invoice_manage.html"><i class="icon-list"></i> 发票管理</a></li>
                                    <li><a href="receivable_accrued_manage.html"><i class="icon-list"></i> 应收计提</a></li>
                                    <li><a href="receivable_bill_manage.html"><i class="icon-list"></i> 应收账单</a></li>
                                    <li><a href="payable_accrued_manage.html"><i class="icon-list"></i> 应付计提</a></li>
                                    <li><a href="payable_bill_manage.html"><i class="icon-list"></i> 应付账单</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <!--左侧导航结束-->
                <!----------------------------------------------------------------------------------------------------->
                <!--右侧内容开始-->
                <div class="col-xs-10">
                    <br/>
                    <ol class="breadcrumb">
                        <li class="active">财务管理 - 应付计提 - 计提详情</li>
                    </ol>

                    <div class="input-group line left">
                        <span class="input-group-addon">计提ID</span></span>
                        <input v-model="accrued.id" disabled type="number" class="form-control" placeholder="计提ID" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">合同ID</span>
                        <select id="contractId" v-model="contract.id" class="form-control" aria-describedby="basic-addon2">
                            <option v-for="item in contractList" :value="item.id">
                                <span>{{item.id}}</span>
                            </option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">合同名称</span>
                        <select id="contractName" v-model="contract.id" class="form-control" aria-describedby="basic-addon2">
                            <option v-for="item in contractList" :value="item.id">
                                <span>{{item.contractName}}</span>
                            </option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon" >预计金额</span>
                        <input v-model="accrued.settlementAmount" type="number" class="form-control" placeholder="预计金额" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">账单数量</span>
                        <input v-model="accrued.billNumber" disabled type="text" class="form-control" placeholder="账单数量" aria-describedby="basic-addon2">
                    </div>
                    <br>
                    <br/>
                    <div class="input-group line left">
                        <span class="input-group-addon">勾稽金额</span>
                        <input v-model="accrued.totalFeeAmount" disabled type="text" class="form-control" placeholder="勾稽金额" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">创建时间</span>
                        <input v-model="accrued.createTime" disabled type="text" class="form-control" placeholder="yyyy-mm-dd" aria-describedby="basic-addon2">
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">计提阶段</span>
                        <select v-model="accrued.accruedOperationStageValue" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>已创建</span></option>
                            <option value="2"><span>已审核</span></option>
                            <option value="3"><span>勾稽中</span></option>
                            <option value="4"><span>已完成</span></option>
                        </select>
                    </div>
                    <div class="input-group line left">
                        <span class="input-group-addon">计提状态</span>
                        <select v-model="accrued.enableStatusValue" id="enableStatusValueName" class="form-control">
                            <option value="0"><span>无</span></option>
                            <option value="1"><span>正常</span></option>
                            <option value="2"><span>弃用</span></option>
                        </select>
                    </div>
                    <a v-on:click="goBack()" class="btn btn-primary ">返回</a>
                    <a v-on:click="save()" class="btn btn-primary ">保存</a>
                    <!----------------------------------------------------------    ------------------------------------------->
                </div>
                <!--右侧内容结束-->
            </div>
        </div>
    </section>
</div>
</body>
<script src="js/jquery-1.11.3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/vue.dev.js"></script>
<script>
    var v = new Vue({
        el: "#app",
        data:{
            token:{userId:1,role:"user",userName:"guoyuhang"},
            currentPage: 1,
            accrued: {},
            contractList: [],
            contract: {},
            operation:0
        },
        created: function (){
            this.token = JSON.parse(localStorage.getItem("token"));
            if (this.token == null){
                alert("未登录");
                window.location.href='login.html';
            }
            var self = this;
            this.accrued = JSON.parse(localStorage.getItem("payableAccrued"));
            $.ajax({
                url: "http://localhost:8080/contract/contract/get/list/contract",
                type: "POST",
                dataType: "json",
                async: false,
                data: {
                    "contractDirectionValue":2
                },
                success: function (data){
                    self.contractList = data.result;
                },
                error: function (data){

                }
            });
            var contractId = this.accrued.contractId;
            this.operation = this.accrued.accruedOperationStageValue;
            if (contractId != null){
                $("#contractId").attr("disabled",true);
                $("#contractName").attr("disabled",true);
            }
            this.contract = JSON.parse(JSON.stringify(this.contractList.filter(function (value,index,arr){
                return value.id == contractId;
            })[0]));
        },
        methods: {
            save: function (){
                if (this.operation > this.accrued.accruedOperationStageValue){
                    alert("计提操作阶段不可回退");
                    this.accrued.accruedOperationStageValue = this.operation;
                    return;
                }
                this.accrued.contractId = this.contract.id;
                $.ajax({
                    url: "http://localhost:8082/payable/payable/accrued/compile/one/payable/accrued",
                    dataType: "json",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(this.accrued),
                    success: function (data){
                        alert(data.result);
                        window.location.href="payable_accrued_manage.html";
                    },
                    error: function (){
                        alert("系统错误");
                        window.location.href="payable_accrued_manage.html"
                    }
                });
            },
            logout: function (){
                localStorage.clear();
                window.location.href='login.html';
            },
            goBack: function (){
                window.location.href='payable_accrued_manage.html';
            }
        }
    });
</script>
</html>